<template>
  <div
    class="common-container"
    v-loading="loadingcard"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(47, 51, 73, 0.3)"
    element-loading-text="拼命加载中"
    style="background: none"
  >
    <!-- <div class="header">
        <div class="header_left">
        </div>
        <div class="header_right">
          <el-button size="medium" style="margin-left: 15px;" @click="onAdd">新增</el-button>
        </div>
      </div> -->

    <div class="div_box">
      <el-row :gutter="24">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          :xl="6"
          :span="6"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="item-content" @click="device(item, 3)">
            <div class="model" @click="detailClick(item.id)">
              <div class="model_box1">
                <!-- <el-image fit="fill" :src="item.pic" style="width: 100px; height: 100px"></el-image> -->
                <div>
                  <img slot="reference" :src="item.pic" />
                </div>
                <div>
                  <div class="model_box1_titel">
                    {{ item.name }}
                  </div>
                  <div class="model_box2_titel">
                    {{ item.description }}
                  </div>
                </div>
              </div>

              <div class="model_box2">
                <!-- <div>
                    <div>15</div>
                    <div>设备总数</div>
                  </div> -->
                <!-- <div>
                    <div>{{item.malfunctionCount}}</div>
                    <div style="color:#FFFF00">故障</div>
                  </div> -->

                <div style="cursor: pointer" @click="device(item, 1)">
                  <el-image :src="zaixian"></el-image>
                  在线<span>{{ item.onlineCount }}</span>
                </div>

                <div style="cursor: pointer" @click="device(item, 0)">
                  <el-image :src="lixian"></el-image>
                  离线<span>{{ item.offlineCount }}</span>
                </div>

                <div style="cursor: pointer" @click="device(item, 2)">
                  <el-image :src="gaojing"></el-image>
                  告警<span>{{ item.alarmCount }}</span>
                </div>
              </div>

              <!-- <div class="pjt-handle">
                  <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
                    <i @click.stop="editClick(item)" class="iconfont tianxie" style="font-size: 18px"></i>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                    <i @click.stop="deleteClick(item.id)" class="iconfont shanchu" style="font-size: 18px"></i>
                  </el-tooltip>
                </div> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- <addProduct ref="refAdd"></addProduct>
      <editProduct ref="refEdit" :editInfo="editInfo"></editProduct> -->
  </div>
</template>

<script>
import { reqProductList, reqProductDel, reqProduct } from "@/api/api";
import { mapState } from "vuex";
//   import addProduct from "./components/addProduct.vue";
//   import editProduct from "./components/editProduct.vue";

export default {
  name: "device",
  components: {
    //   addProduct,
    //   editProduct,
  },
  mixins: [],
  data() {
    return {
      tableData: [],
      editInfo: {},
      url: require("@/assets/images/Group 1390.png"),
      zaixian: require("@assets/images/zaixian.png"),
      lixian: require("@assets/images/lixian.png"),
      gaojing: require("@assets/images/gaojing.png"),
      loadingcard: false,
      targetId: "",
    };
  },
  mounted() {},
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  methods: {
    detailClick() {},
    // 跳转到设备列表
    device(item, index) {
      this.$emit("deviceClick", item.id, index);
      // this.$router.push({name:'deviceList',params: {id:item.id}}) // 只能用 name
    },
    // 修改
    editClick(row) {
      this.editInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refEdit.dialogVisible = true;
    },
    // 删除
    async deleteClick(id) {
      const result = await this.$confirm(
        "此操作将永久删除该产品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      let res = await reqProductDel(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除产品成功");
      this.Product();
    },
    // 新增
    onAdd() {
      this.$refs.refAdd.dialogVisible = true;
    },
    // async ProductList() {
    //   let res = await reqProductList();
    //   if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //   this.tableData = res.data.rows;
    // },
    async Product() {
      let res = await reqProduct(1, 100, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        name: "",
        orgId: this.targetId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
    },
  },
  async created() {
    this.targetId = this.spacesManage.organizationInfo.orgId;
    this.loadingcard = true;
    await this.Product();
    this.loadingcard = false;
    // if (this.user.roleName == 'ORG_ADMIN' || this.user.roleName == 'INSTERALL_USER') {
    //   // 组织||装维
    //   this.targetId = this.spacesManage.organizationInfo.orgId;
    //   this.loadingcard = true;
    //   await this.Product();
    //   this.loadingcard = false;
    // } else {
    //   this.targetId = this.spacesManage.organizationInfo.orgId;
    //   this.loadingcard = true;
    //   await this.Product();
    //   this.loadingcard = false;
    // }
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

.common-container {
  height: 89% !important;
  overflow: scroll;
}

.div_box {
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 15px;
  // background-color: rgb(255, 210, 210);

  .item-content {
    height: 18vh;
    // background-color: rgb(255, 255, 255);
    background: @primaryBac2;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    box-shadow: @boxShadow;
    // box-shadow: 0px 1px 5px #dedede;

    .model {
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;

      .model_box1 {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        // padding-left: 20px;
        box-sizing: border-box;

        > div {
          height: 100%;
        }

        > div:first-of-type {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 56%;
          }
        }

        > div:last-of-type {
          // margin-left: 30px;
          flex: 2;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .model_box1_titel {
          width: 90%; //宽度一定要有，具体根据自己需求
          text-align: left;
          // overflow: hidden;
          /*超出部分隐藏*/
          // white-space: nowrap;
          /*不换行*/
          // text-overflow: ellipsis;
          /*超出部分文字以...显示*/
          color: @primaryProduct;
          font-weight: 600;
        }

        .model_box2_titel {
          width: 90%;
          color: @primaryProduct2;
          font-size: 12px;
          margin-top: 10px;
        }
      }

      .model_box2 {
        flex: 1;
        display: flex;
        align-items: center;
        color: #666666;
        // padding: 0 11%;
        box-sizing: border-box;

        > div {
          flex: 1;
          // text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          color: @primaryProduct2;
          // > div:first-of-type {
          //   color: @primaryProduct3;
          //   font-size: 12px;
          // }
          // > div:last-of-type {
          //   color: @primaryProduct2;
          //   font-size: 12px;
          //   margin-top: 3px;
          // }
        }

        span {
          margin-left: 7px;
          font-size: 14px;
          padding-top: 1%;
          color: @primaryProduct3;
          font-weight: 700;
        }

        .el-image {
          width: 15px;
          height: 15px;
          margin-right: 4px;
        }
      }

      .pjt-handle {
        position: absolute;
        top: 10px;
        right: 10px;

        > .item:first-of-type {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>